<template>
  <div id="rules_manage" class="container">
    <div class="content">
      <div class="title">合同模板管理</div>
      <div class="panel">
        <div v-html="divHtml1" id="contract_template"></div>
        <el-button @click="sure">确认</el-button>
        <el-button @click="sure_two">再次确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
import E from "wangeditor";
// import wangeditorEmotiones from './wangeditor.js'
import wangeditorEmotiones from "@/js/operation_manage/wangeditor.js";
export default {
  data() {
    return {
      editor1: null,
      editor2: null,
      name: "哈哈哈哈",
      divHtml: "",
      divHtml1: ""
    };
  },
  components: {},
  methods: {
    sure() {
      vm.divHtml1 = "";
      $("#contract_template").html("");
      vm.divHtml1 = vm.divHtml;
      this.$nextTick(function() {
        $("input[name='1']").val("父亲");
        console.log($("#edit1").html());
        vm.editor1 = new E("#edit1");
        this.editor1.customConfig.zIndex = 29;
        this.editor1.customConfig.menus = ["bold"];
        vm.editor1.create();
        vm.editor2 = new E("#edit2");
        this.editor2.customConfig.zIndex = 29;
        this.editor2.customConfig.menus = ["bold"];
        vm.editor2.create();
        var btnRecoveryList = $("#charg_standard>button");
        var btnDeteleList = $("#charg_standard>div");

        btnRecoveryList.bind("click", function() {
          btnDeteleList.css("display", "block");
        });
        for (let i = 0; i < btnDeteleList.length; i++) {
          btnDeteleList
            .eq(i)
            .children("button")
            .bind("click", function(e) {
              btnDeteleList.eq(i).css("display", "none");
            });
        }
      });
    },
    sure_two() {
      let printStr = "";
      printStr+='<div class="contract_info">';
      printStr+='<div id="header" class="header">'+$("#header").html()+"</div>";
      printStr+='<div id="edit1">'+vm.editor1.txt.html()+"</div>";
      printStr+='<div id="header">'+$("#charg_standard").html()+"</div>";
      printStr+='<div id="edit2">'+vm.editor2.txt.html()+"</div>";
      printStr+='<div id="header">'+$("#foot").html()+"</div>";
      printStr+='</div>';
      console.log(printStr);
      vm.divHtml = printStr;
    },

    /**清空内容按钮 */
    initClearFunc() {
      let self = this;
      E.clearAllContent = {
        // editor create之后调用
        init: function(editorSelector) {
          let fulls = $(editorSelector + " .w-e-toolbar").find(
            "._wangEditor_btn_clearAll"
          );
          if (fulls.length == 0) {
            $(editorSelector + " .w-e-toolbar")
              .append(`<div class="w-e-menu" title="清空" style="">
              <a class="_wangEditor_btn_clearAll" fullscreen="1"><i class="el-icon-delete"></i></a></div>`);
            $("._wangEditor_btn_clearAll").on("click", function(d) {
              // self.editor.txt.clear();
              self.editor.cmd.do("selectAll", null);
              self.editor.cmd.do("delete", null);
            });
          }
        }
      };
      E.clearAllContent.init("#" + this.editorId);
    }
  },
  mounted() {
    vm = this;
    // this.editor = new E(this.$refs.editorElem);
    // this.editor.customConfig.zIndex = 29;
    // this.editor.customConfig.menus = [
    // ];
    // this.editor.create(); // 创建富文本实例
    // this.editor.$textElem.attr('contenteditable', false)
    vm.divHtml =
      '<div class="contract_info">\
        <div data-v-22731aa6="" id="header" class="header">\
          甲方：\
          <br data-v-22731aa6=""> <br data-v-22731aa6=""> <br data-v-22731aa6="">乙方幼儿：\
          <br data-v-22731aa6="">乙方（法定监护人）：\
          <input data-v-22731aa6="" name="1" disabled="disabled" class="field" style="width: 0.8rem;"> &nbsp;&nbsp;&nbsp;&nbsp;身份证：\
          <input data-v-22731aa6="" name="2" disabled="disabled" class="field" style="width: 3rem;"> <br data-v-22731aa6="">联系电话：\
          <input data-v-22731aa6="" name="3" disabled="disabled" class="field" style="width: 2rem;"></div> <div data-v-22731aa6="" id="edit1" > <div style="line-height: 0.4rem; font-size: 0.16rem; text-indent: 0.34rem;">根据相关法律法规规定，甲乙双方本着互惠互利的原则，经双方友好协商，就乙方子女在可儿幼一家国际婴童成长中心就读期间，对缴费、退费等相关事宜，自愿达成以下协议内容，供双方共同遵照执行。</div></div> \
          <div data-v-22731aa6="" id="charg_standard">一、收费标准<button>一键恢复</button>\
          <div data-v-22731aa6="">\
            1、甲方可儿幼一家国际婴童成长中心托育费标准为￥\
            <input data-v-22731aa6="" name="4" disabled="disabled" class="field" style="width: 0.8rem;">元/月，乙方\
            <input data-v-22731aa6="" name="5" disabled="disabled" class="field" style="width: 0.8rem;">于本协议签署之日一次性为幼儿\
            <input data-v-22731aa6="" name="6" disabled="disabled" class="field" style="width: 0.8rem;">缴纳\
            <input data-v-22731aa6="" name="7" disabled="disabled" class="field" style="width: 0.8rem;">年\
            <input data-v-22731aa6="" name="8" disabled="disabled" class="field" style="width: 0.8rem;">月\
            <input data-v-22731aa6="" name="9" disabled="disabled" class="field" style="width: 0.8rem;">日至\
            <input data-v-22731aa6="" name="10" disabled="disabled" class="field" style="width: 0.8rem;">年\
            <input data-v-22731aa6="" name="11" disabled="disabled" class="field" style="width: 0.8rem;">月\
            <input data-v-22731aa6="" name="12" disabled="disabled" class="field" style="width: 0.8rem;">日的托育费，享受\
            <input data-v-22731aa6="" name="13" disabled="disabled" class="field" style="width: 0.8rem;">折优惠，优惠后托育费为￥\
            <input data-v-22731aa6="" name="14" disabled="disabled" class="field" style="width: 0.8rem;">元/月，共计￥\
            <input data-v-22731aa6="" name="15" disabled="disabled" class="field" style="width: 0.8rem;">元，大写：\
            <input data-v-22731aa6="" name="16" disabled="disabled" class="field" style="width: 2rem;">；<button id="btn_standard1">删除</button>\
          </div> <div data-v-22731aa6="">\
            2、 甲方为1岁以上幼儿提供两餐两点，餐费标准为￥\
            <input data-v-22731aa6="" name="17" disabled="disabled" class="field" style="width: 0.8rem;">元/月, 乙方\
            <input data-v-22731aa6="" name="18" disabled="disabled" class="field" style="width: 0.8rem;">于本协议签署之日一次性为幼儿\
            <input data-v-22731aa6="" name="19" disabled="disabled" class="field" style="width: 0.8rem;">缴纳\
            <input data-v-22731aa6="" name="20" disabled="disabled" class="field" style="width: 0.8rem;">年\
            <input data-v-22731aa6="" name="21" disabled="disabled" class="field" style="width: 0.8rem;">月\
            <input data-v-22731aa6="" name="22" disabled="disabled" class="field" style="width: 0.8rem;">日至\
            <input data-v-22731aa6="" name="23" disabled="disabled" class="field" style="width: 0.8rem;">年\
            <input data-v-22731aa6="" name="24" disabled="disabled" class="field" style="width: 0.8rem;">月\
            <input data-v-22731aa6="" name="25" disabled="disabled" class="field" style="width: 0.8rem;">日的餐费共计￥\
            <input data-v-22731aa6="" name="26" disabled="disabled" class="field" style="width: 0.8rem;">元，大写：\
            <input data-v-22731aa6="" name="27" disabled="disabled" class="field" style="width: 2rem;">；<button id="btn_standard2">删除</button>\
          </div> <div data-v-22731aa6="">\
            3、 日托延时晚接收费：周一至周五放学后18:00-19:00园区教师加班对晚接幼儿集体看护，按每小时￥\
            <input data-v-22731aa6="" name="28" disabled="disabled" class="field" style="width: 0.8rem;">元计算费用，19:00以后不再提供晚接看护服务，乙方需在幼儿入园同时购买晚接卡（最低10小时，每张￥\
            <input data-v-22731aa6="" name="29" disabled="disabled" class="field" style="width: 0.8rem;">元）；<button id="btn_standard3">删除</button>\
          </div></div> <div data-v-22731aa6="" id="edit2" ><div style="line-height: 0.4rem; font-size: 0.16rem;">\
          4、 其他费用\
          <br data-v-22731aa6="">4.1一次性物品费用：书包、被褥、园服等实物，一旦发放，概不退还；\
          <br data-v-22731aa6="">4.2保险费等其他代收费用，一旦缴纳，概不退费；\
          <br data-v-22731aa6="">4.3即时发生收费的费用：如社会实践活动、课程材料费用等，概不退费；\
          <br data-v-22731aa6="">4.4，以上未列述费用，不予退费。\
          <br data-v-22731aa6="">5、乙方将所有费用支付后，甲方为乙方开据发票，乙方可以通过客服提出申请要求，填写发票申请表，发票抬头只能开具少儿姓名 收费项目：培训费），发票将在30日内为乙方开出，代收物品费用不予开具发票；\
          <br data-v-22731aa6="">二、交费方式\
          <br data-v-22731aa6="">乙方为幼儿交费可以采用以下任意一种方式\
          <br data-v-22731aa6="">1、 在园所以现金、刷卡、支付宝或微信支付交费\
          <br data-v-22731aa6="">2、 对公司账户汇款转账（转账时请在备注栏写明交费幼儿姓名）\
          <br data-v-22731aa6="">全 称：\
          <br data-v-22731aa6="">开户行：\
          <br data-v-22731aa6="">账 号：\
          <br data-v-22731aa6="">3、乙方应按协议约定的时间和收费标准,向甲方足额支付各种款项,并严格遵守甲方依法制定的各项规章制度。\
          <br data-v-22731aa6="">三、费用调整说明\
          <br data-v-22731aa6="">&nbsp;&nbsp;&nbsp;&nbsp;甲方应确保乙方的托育费标准在本协议有效期内不受价格体系调整的影响，即在本协议约定的托育费有效期内，甲方对托育费收费标准进行调整的，乙方不在调整范围之内。乙方托育费到期后，则应按续费当时甲方的价格体系和标准缴费。\
          <br data-v-22731aa6="">四、双方约定\
          <br data-v-22731aa6="">1、退园退费\
          <br data-v-22731aa6="">1.1 乙方幼儿在协议期内不论何种原因需要退园，须提前30日向甲方提出书面退园申请，经甲方书面同意后方可办理退园退费手续；如提前退园则不能享受办理入园时的优惠，甲方将按乙方缴费时的原价，计算该幼儿已在园学习的时间，按￥________元/月扣除已发生的费用，将剩余已付且\
          <br data-v-22731aa6="">未发生的费用80%退还乙方，剩余20%将作为违约金不予返还。一次性物品费用及已交纳的其他代收费用不予退还。\
          <br data-v-22731aa6="">2、未出勤退费\
          <br data-v-22731aa6="">2.1逢2、8月幼儿整月未出勤的，托育费全额退费；有出勤，按________元/21.75*未出勤天数退还托育费；春节期间需按照甲方规定放假时间安排出勤。\
          <br data-v-22731aa6="">2.2 幼儿生病或其他紧急事情，需在请假日前一天的19:00前向甲方请假并获得批准，请假申请及临时缺勤的幼儿，当天计算出勤；\
          <br data-v-22731aa6="">2.3幼儿由于放假、请假、转学、退学、插班等原因造成当月缺勤，餐费按照幼儿当月实际出勤天数计算；其中因缺勤产生餐费退费的应扣除20%服务费后按退费金额80%退还乙方；\
          <br data-v-22731aa6="">2.4乙方无论何种原因不在园内用餐，应在前一天中午12:00前申请并获得批准，请假当天申请及临时缺勤的幼儿因为食材已经采购，当天餐费不予退费。\
          <br data-v-22731aa6="">五、特殊说明\
          <br data-v-22731aa6="">1、 因遭遇不可抗力的突发事件，包括但不限于各种自然灾害，突发性疫情等非校园原因造成的停课，或者因政府临时通知停电、停水、停气等其他不可抗拒因素使得幼儿无法入园的，甲方将不予退还该期间任何费用；\
          <br data-v-22731aa6="">2、 国家法定节假日不退餐费和托育费。\
          <br data-v-22731aa6="">3、家长应妥善保管乙方所开具的票据及刷卡的原始底单，如办理转/退园或其他退费手续等事项，未能出示原始票据，如若丢失造成的任何损失，则由乙方承担。\
          <br data-v-22731aa6="">4、甲方或其聘用的第三方机构可能不时为课堂及活动以及相关作品进行记载、拍照或拍摄影片，用于培训营销等用途，而您认知您子女在课上及参与活动以及在这些上课和活动过程制作的作品可能会被记载、拍照或摄入影片之内，您同意甲方可以使用此记载文件、照片和影片；\
          <br data-v-22731aa6="">5、如您的孩子在身体健康方面有特殊情况（先心病，癫痫病等，惊厥过，手术过等）请务必如实告知我们，并书面，口头说明解决方案，如未告知，后果自负。\
          <br data-v-22731aa6="">6、如有关于孩子入托期间的问题，欢迎拨打电话010-60554080 ，我们将尽全力为您解决；\
          <br data-v-22731aa6="">7、家长确定了解并认可本协议上述内容并签字确认，如出现本合同未说明等事宜，双方协商可签订补充协议。协议履行中若起争议,应友好协商,协商不成，任何一方均可向甲方所在地人民法院提起诉讼。\
          <br data-v-22731aa6="">8、按照《中华人民共和国侵权责任法》第三十八条规定，对于在中心幼儿发生的伤害事故，甲方尽了 教育、管理职责的，不承担责任；甲方未尽到教育、管理职责的，承担相应责任。即有过错则担责，无过错则无责任。鉴于此，家长平时应当加强对幼儿的安全教育，协助中心做好安全工作。在中心幼儿发生伤害事故后，幼儿的家长保证理智地看待和处理事故纠纷，通过合法的途径、方式进行维权，不得干扰中心的正常教育教学秩序，否则甲方有权单方解除入学合同，并依法追究其法律责任。\
          <br data-v-22731aa6=""> <br data-v-22731aa6=""> <br data-v-22731aa6="">本协议的有效期为 年 月 日至 年 月 日，本协议一式两份，甲、乙双方各持一份，具有同等法律效力；本协议自甲、乙双方签字、盖章之日生效。\
          <br data-v-22731aa6="">本协议最终解释权归***************有限公司所有。\
          <br data-v-22731aa6=""></div></div> <div data-v-22731aa6="" id="foot"><div data-v-22731aa6="" class="autograph"><div data-v-22731aa6="" style="width: 50%;">甲方（盖章）：</div> <div data-v-22731aa6="">乙方幼儿：</div></div> <br data-v-22731aa6=""> <br data-v-22731aa6="">监护人（签字）：\
          <br data-v-22731aa6="">招生顾问（签字）：\
          <br data-v-22731aa6="">协议签订时间：20&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日\
          <br data-v-22731aa6="">协议签订及履行地点：\
        </div></div></div>';
  }
};
</script>

<style lang="scss">
.contract_info {
  width: 10.12rem;
  border: 1px solid #ccc;
  padding: 0.06rem;
  font-size: 0.16rem;
  line-height: 0.4rem;
  .header {
    color: #333333;
    font-weight: bold;
    font-size: 0.18rem;
  }
  .field {
    color: #666666;
    border: none;
    font-size: 0.16rem;
    margin: 0 0.06rem;
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid #aaaaaa;
  }
  .autograph {
    display: flex;
    justify-content: flex-start;
  }
}
#edit1,
#edit2 {
  div {
    border: 0px solid #ccc !important;
  }
  height: 6rem;
  width: 10rem;
  .w-e-toolbar {
    flex-wrap: wrap !important;
    font-size: 0.14rem !important;
  }
  .w-e-toolbar .w-e-droplist {
    background: #d0cfcf !important;
  }
  .w-e-toolbar .w-e-droplist .w-e-dp-title {
    color: black !important;
  }
  .w-e-text-container {
    height: 5rem !important;

    .w-e-text {
      overflow-x: hidden;
      overflow-y: auto;
      img {
        user-select: none;
      }
      img:hover {
        box-shadow: unset;
      }
    }
    .w-e-emoticon-container {
      img {
        width: 0.3rem;
        height: auto;
      }
    }

    // 滚动条
    .w-e-text::-webkit-scrollbar {
      width: 0.05rem;
      height: 0.1rem;
    }
    .w-e-text::-webkit-scrollbar-thumb {
      border-radius: 0.5rem;
      background: #bbbbbb;
    }
    .w-e-text::-webkit-scrollbar-track {
      background: #f2f6fc;
    }
    // 滚动条
    .w-e-panel-tab-content::-webkit-scrollbar {
      width: 0.05rem;
      height: 0.1rem;
    }
    .w-e-panel-tab-content::-webkit-scrollbar-thumb {
      border-radius: 0.5rem;
      background: #bbbbbb;
    }
    .w-e-panel-tab-content::-webkit-scrollbar-track {
      background: #f2f6fc;
    }
  }
  .fullscreen-editor {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
    top: 0px !important;
    background-color: white;
    z-index: 9999;
  }

  .fullscreen-editor .w-e-text-container {
    width: 100% !important;
    height: 95% !important;
  }
}
</style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>